import { Component, OnInit, TemplateRef, ViewChild } from "@angular/core";
import { Router, NavigationExtras } from "@angular/router";

export interface TableHeaderProps {
  title: string; // 表头名称
  field?: string; // 字段
  pipe?: string; // 管道
  width?: number; // 单元格宽度
  thTemplate?: TemplateRef<any>; // th单元格模板
  tdTemplate?: TemplateRef<any>; // td单元格模板
  fixed?: boolean; // 是否固定单元格 （只有从最左边或最右边连续固定才有效）
  notNeedEllipsis?: boolean; // 不需要...时给true
  tdClassList?: string[]; // 为td单元格指定类 (父组件中的类必须加上 /deep/ 前缀才能对子组件生效)
  thClassList?: string[]; // 为th单元格指定类  (父组件中的类必须加上 /deep/ 前缀才能对子组件生效)
  show?: boolean; // 是否显示列，false:不显示，其他：显示
}

export interface TableConfigProps {
  needNoScroll?: boolean; //列表是否需要横向滚动条
  showCheckbox?: boolean;
  pageIndex: number; // 当前页码，（与页面中页码双向绑定）
  pageSize: number; // 每一页显示的数据条数（与页面中pageSize双向绑定）
  total: number; // 数据总量，用于计算分页（应该从后端接口中获得）
  loading: boolean; // 是否显示表格加载中
  headers: TableHeaderProps[]; // 列设置
}

export interface PageHeaderType {
  title: string;
  desc: string | TemplateRef<any>;
  extra: string | TemplateRef<any>;
  breadcrumb: string[];
  footer: string | TemplateRef<any>;
}

interface TableDataProps {
  num: string;
  name: string;
  code: string;
  unitPrice: number;
  number: string;
  price: string;
}

@Component({
  selector: "app-welcome",
  templateUrl: "./welcome.component.html",
  styleUrls: ["./welcome.component.less"],
})
export class WelcomeComponent implements OnInit {
  isVisible = false;
  @ViewChild("highLightTpl", { static: true }) highLightTpl!: TemplateRef<any>;

  tableConfig!: TableConfigProps;

  tableData: TableDataProps[] = [
    {
      num: "1234561",
      name: "矿泉水 550ml",
      code: "演示作用域",
      unitPrice: 1233333,
      number: "1",
      price: "2.00",
    },
    {
      num: "1234561",
      name: "矿泉水 550ml",
      code: "演示作用域",
      unitPrice: 1233333,
      number: "1",
      price: "2.00",
    },
    {
      num: "1234561",
      name: "矿泉水 550ml",
      code: "演示作用域",
      unitPrice: 1233333,
      number: "1",
      price: "2.00",
    },
    {
      num: "1234561",
      name: "矿泉水 550ml",
      code: "演示作用域",
      unitPrice: 1233333,
      number: "1",
      price: "2.00",
    },
    {
      num: "1234561",
      name: "矿泉水 550ml",
      code: "演示作用域",
      unitPrice: 1233333,
      number: "1",
      price: "2.00",
    },
  ];

  constructor(public router: Router) {}

  ngOnInit() {
    this.tableConfig = {
      showCheckbox: false,
      headers: [
        {
          title: "操作类型",
          field: "num",
          width: 50,
        },
        {
          title: "操作人",
          width: 60,
          field: "name",
        },
        {
          title: "执行结果",
          width: 50,
          field: "code",
          tdTemplate: this.highLightTpl,
        },
        {
          title: "操作时间",
          width: 50,
          field: "unitPrice",
          pipe: "date:yyyy-MM-dd HH:mm",
        },
        {
          title: "备注",
          width: 50,
          field: "number",
        },
      ],
      total: 0,
      loading: false,
      pageSize: 10,
      pageIndex: 1,
    };
  }

  go() {
    // 动态路由跳转
    // this.router.navigate(['/workplace', 66]);

    // 路由传参跳转
    const navigationExtras: NavigationExtras = {
      queryParams: { pid: 4 },
    };

    this.router.navigate(["/dashboard/workplace"], navigationExtras);
  }

  handleOk(): void {
    console.log("Button ok clicked!");
    this.isVisible = false;
  }

  handleCancel(): void {
    console.log("Button cancel clicked!");
    this.isVisible = false;
  }

  onDrag(data: any) {
    console.log(data);
  }
}
